 /* 美化搜索框样式 */
.search-box {
    display: flex; /* 使用 flexbox 布局 */
    align-items: center; /* 垂直居中 */
    margin-top: 10px; /* 上边距 */
}

.search-box input[type="text"] {
    border: 1px solid #ced4da; /* 边框颜色 */
    border-radius: 4px; /* 圆角 */
    padding: 10px; /* 内边距 */
    width: 250px; /* 宽度 */
    transition: border-color 0.3s; /* 动画效果 */
}

.search-box input[type="text"]:focus {
    border-color: #007bff; /* 聚焦时的边框颜色 */
    outline: none; /* 去掉默认的轮廓 */
}

.search-box button {
    background-color: #007bff; /* 按钮背景色 */
    color: white; /* 按钮字体颜色 */
    border: none; /* 去掉边框 */
    border-radius: 4px; /* 圆角 */
    padding: 10px 15px; /* 内边距 */
    margin-left: 5px; /* 左边距 */
    cursor: pointer; /* 鼠标指针 */
    transition: background-color 0.3s; /* 动画效果 */
}

.search-box button:hover {
    background-color: #0056b3; /* 悬停时的颜色 */
}